<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <style>
        .bar {
            width: 32px;
            margin: 10px 5px 0 10px;
            text-align: center;
            cursor: pointer;
            /* margin: 5px 5px 0 5px; */
        }

        .dnum {
            cursor: pointer;
        }

        .orderTitle {
            height: 30px;
            width: 100%;
            background-color: #FAFAFA;
            color: grey;
            line-height: 30px;
        }

        .orderBody {
            height: 150px;
            width: 99.8%;
            /* background-color: #eeeeee; */
            border: 1px solid #e2e2e2;
            border-top: none;
        }

        #mimg {
            width: 120px;
            margin: 15px;
        }

        li {
            width: 80px;
            text-align: center;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="layuimini-container">
        <div>
            <ul class="layui-nav layui-bg-gray" lay-filter="">
                <li class="layui-nav-item layui-this" id="nav1">全部</li>
                <li class="layui-nav-item" id="nav2">代付款</li>
                <li class="layui-nav-item" id="nav3">运输中</li>
                <li class="layui-nav-item" id="nav4">已完成</li>
                <li class="layui-nav-item" id="nav5">已取消</li>
            </ul>
        </div>
        <div class="layuimini-main">

            <fieldset class="table-search-fieldset">
                <legend>搜索信息</legend>
                <div style="margin: 10px 10px 10px 10px">
                    <form class="layui-form layui-form-pane" action="">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">订单编号</label>
                                <div class="layui-input-inline" style="width: 225px;">
                                    <input type="text" name="oid" id="oid" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline" style="margin-left: -10px;">
                                <label class="layui-form-label">要货工地</label>
                                <div class="layui-input-block" style="width: 328px;">
                                    <select name="workplace" id='pname' lay-search>
                                        <option value="">请选择工地</option>
                                        <option value="0">旭辉运河悦章</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">商品名称</label>
                                <div class="layui-input-inline" style="width: 225px;">
                                    <input type="text" name="mname" id="mname" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">下单时间</label>
                                <div class="layui-input-block" style="width: 145px;">
                                    <select name="time" id='time' lay-search>
                                        <option value="0">近一周</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline" style="margin-left: -15px;">
                                <button type="button" class="layui-btn layui-btn-primary"
                                    style="border:1px solid #eeeeee;border-left:none">自定义</button>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">订单类型</label>
                                <div class="layui-input-block" style="border:1px solid #eeeeee;border-left:none;">
                                    <input type="radio" name="otype" value="全部" title="全部" checked id="all">
                                    <input type="radio" name="otype" value="单次采购" title="单次采购" id="single">
                                    <input type="radio" name="otype" value="合同采购" title="合同采购" id="contract">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <button type="submit" class="layui-btn layui-btn-primary" lay-submit
                                    lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                            </div>
                            <div class="layui-inline">
                                <button type="submit" class="layui-btn layui-btn-primary" lay-submit
                                    style="width: 90px;">导出</button>
                            </div>
                        </div>
                    </form>
                </div>
            </fieldset>
            <div style="margin-top: 20px;">
                <div class="orderItem" id="item1">
                    <div class="orderTitle">
                        <span style="margin-left: 30px;">单次</span>
                        <span id="time" style="margin-left: 50px;">2022-02-04 18:30:02</span>
                        <span id="oid" style="margin-left: 150px;">订单号：2022020401</span>
                        <div style="display: inline-block;cursor: pointer;margin-left: 150px;">
                            <img src="../images/shop.png" alt="" style="width: 18px;">
                            <span id="pname">河南融昌建材有限公司</span>
                        </div>
                        <button type="button" class="layui-btn layui-btn-danger layui-btn-xs"
                            style="margin-left: 350px;" id="delete1">删除</button>
                    </div>
                    <div class="orderBody">
                        <div
                            style="width: 350px;display: inline-block;vertical-align: middle;border-right:1px solid #eeeeee">
                            <img src="https://pic.imgdb.cn/item/620121c22ab3f51d911834c8.jpg" alt="" id="mimg">
                            <div style="display: inline-block;height: 120px;position: relative;">
                                <p class="mname" style="font-size: 16px;margin-bottom: 10px;">砖头</p>
                                <p style="color: grey;margin-left: 150px;">x2吨</p>
                                <div style="height: 30px;position:relative;top: 45px;cursor: pointer;" id="addition">
                                    <img src="../images/附属信息.png" alt="" style="width: 18px;">
                                    <span style="color: grey;">附属商品</span>
                                </div>
                            </div>
                        </div>
                        <div
                            style="height: 100%;width: 250px;display: inline-block;vertical-align: middle;position: relative;text-align: center;border-right:1px solid #eeeeee">
                            <img src="../images/公司.png" alt="" style="margin-right:5px;position: relative;top:60px">
                            <span style="position: relative;top:60px">旭辉运河悦章</span>
                        </div>
                        <div
                            style="padding:0 10px;height: 100%;width: 200px;border-right:1px solid #eeeeee;display: inline-block;vertical-align: middle;position: relative;text-align: center;">
                            <p style="position: relative;top:50px">总额&nbsp¥2000.00</p>
                            <div
                                style="width:100%;height: 1px;border-bottom: 1px dashed grey;position: relative;top:60px">
                            </div>
                            <p style="position: relative;top:70px">支付宝</p>
                        </div>
                        <div
                            style="padding:0 10px;height: 100%;width: 200px;border-right:1px solid #eeeeee;display: inline-block;vertical-align: middle;position: relative;text-align: center;">
                            <p style="position: relative;top:50px">已付款</p>
                            <a style="position: relative;top:60px" onclick="var options = {
                                href: 'orderDetail.html?mid=12',
                                title: '订单详情'
                            };
                            parent.layui.miniTab.openNewTabByIframe(options);">订单详情</a>
                        </div>
                        <div
                            style="padding:0 10px;height: 100%;width: 195px;display: inline-block;vertical-align: middle;position: relative;text-align: center;">
                            <a style="position: relative;top:60px" onclick="var options = {
                                href: 'myPoundList.html',
                                title: '我的磅单'
                            };
                            parent.layui.miniTab.openNewTabByIframe(options);">查看磅单</a>
                        </div>
                    </div>
                </div>
                <div class="orderItem" style="margin-top: 10px;" id="item2">
                    <div class="orderTitle">
                        <span style="margin-left: 30px;">合同</span>
                        <span id="time" style="margin-left: 50px;">2022-02-04 22:00:30</span>
                        <span id="oid" style="margin-left: 150px;">订单号：2022020402</span>
                        <div style="display: inline-block;cursor: pointer;margin-left: 150px;">
                            <img src="../images/shop.png" alt="" style="width: 18px;">
                            <span id="pname">河南融昌建材有限公司</span>
                        </div>
                        <button type="button" class="layui-btn layui-btn-danger layui-btn-xs"
                            style="margin-left: 350px;" id="delete2">删除</button>
                    </div>
                    <div class="orderBody">
                        <div
                            style="width: 350px;display: inline-block;vertical-align: middle;border-right:1px solid #eeeeee">
                            <img src="https://pic.imgdb.cn/item/620121902ab3f51d91180c7a.jpg" alt="" id="mimg">
                            <div style="display: inline-block;height: 120px;position: relative;">
                                <p class="mname" style="font-size: 16px;margin-bottom: 10px;">沙子</p>
                                <p style="color: grey;margin-left: 150px;">x1吨</p>
                            </div>
                        </div>
                        <div
                            style="height: 100%;width: 250px;display: inline-block;vertical-align: middle;position: relative;text-align: center;border-right:1px solid #eeeeee">
                            <img src="../images/公司.png" alt="" style="margin-right:5px;position: relative;top:60px">
                            <span style="position: relative;top:60px">旭辉运河悦章</span>
                        </div>
                        <div
                            style="padding:0 10px;height: 100%;width: 200px;border-right:1px solid #eeeeee;display: inline-block;vertical-align: middle;position: relative;text-align: center;">
                            <p style="position: relative;top:50px">总额&nbsp¥1000.00</p>
                            <div
                                style="width:100%;height: 1px;border-bottom: 1px dashed grey;position: relative;top:60px">
                            </div>
                            <p style="position: relative;top:70px">月结/预付款</p>
                        </div>
                        <div
                            style="padding:0 10px;height: 100%;width: 200px;border-right:1px solid #eeeeee;display: inline-block;vertical-align: middle;position: relative;text-align: center;">
                            <p style="position: relative;top:50px">已付款</p>
                            <a style="position: relative;top:60px" onclick="var options = {
                                href: 'orderDetail.html?mid=7',
                                title: '订单详情'
                            };
                            parent.layui.miniTab.openNewTabByIframe(options);">订单详情</a>
                        </div>
                        <div
                            style="padding:0 10px;height: 100%;width: 195px;display: inline-block;vertical-align: middle;position: relative;text-align: center;">
                            <a style="position: relative;top:60px">查看磅单</a>
                        </div>
                    </div>
                </div>
            </div>
            <div style="width: 100%;height: 50px;background-color: #FAFAFA;display: none;" id="nodata">
                <p style="width: 100%;height: 50px;line-height: 50px;color: grey;text-align: center;">无数据</p>
            </div>
        </div>
        <div class="footer" id="page" style="padding-left:10px;">
        </div>

    </div>
    <script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <script>
        layui.use(['form', 'table', 'laypage'], function () {
            var $ = layui.jquery,
                form = layui.form,
                table = layui.table,
                laypage = layui.laypage;
            laypage.render({
                elem: 'page',
                count: 2,
                layout: ['prev', 'page', 'next', 'count', 'skip']
            });
            $('#addition').on('mouseover', function () {
                layer.open({
                    title: '附属商品',
                    content: '<img src="../images/左翻页.png" style="margin-right:20px;width:24px"><img src="../images/防冻液.png" style="margin-right:15px">防冻剂<span style="color:#1E9FFF;margin-left:15px">¥10.00</span>&nbsp;*&nbsp;10支<img src="../images/右翻页.png" style="margin-left:20px;width:24px">',
                    btn: []
                })
            })
            $('#delete1').on('click', function () {
                layer.confirm("请问是否确定删除，删除后不可恢复？", {
                    btn: ["确定", "取消"] //按钮
                }, function () {
                    $('#item1').css('display', 'none');
                    if ($('#item2').css('display') != 'none') {
                        laypage.render({
                            elem: 'page',
                            count: 1,
                            layout: ['prev', 'page', 'next', 'count', 'skip']
                        });
                    } else {
                        $('#nodata').css('display', 'block');
                        $('#page').css('display', 'none');
                    }
                    layer.close(layer.index);
                }, function () {
                    layer.msg('您已点击取消');
                });

            })
            $('#delete2').on('click', function () {
                layer.confirm("请问是否确定删除，删除后不可恢复？", {
                    btn: ["确定", "取消"] //按钮
                }, function () {
                    $('#item2').css('display', 'none');
                    if ($('#item1').css('display') != 'none') {
                        laypage.render({
                            elem: 'page',
                            count: 1,
                            layout: ['prev', 'page', 'next', 'count', 'skip']
                        });
                    } else {
                        $('#page').css('display', 'none');
                        $('#nodata').css('display', 'block');
                    }
                    layer.close(layer.index);
                }, function () {
                    layer.msg('您已点击取消');
                });

            })
            $('#nav1').on('click', function () {
                $('#nav1').addClass('layui-this');
                $('#nav2').removeClass('layui-this');
                $('#nav3').removeClass('layui-this');
                $('#nav4').removeClass('layui-this');
                $('#nav5').removeClass('layui-this');
                $('#item1').css('display', 'block');
                $('#item2').css('display', 'block');
                $('#page').css('display', 'block');
                $('#nodata').css('display', 'none');
            })
            $('#nav2').on('click', function () {
                $('#nav2').addClass('layui-this');
                $('#nav1').removeClass('layui-this');
                $('#nav3').removeClass('layui-this');
                $('#nav4').removeClass('layui-this');
                $('#nav5').removeClass('layui-this');
                $('#item1').css('display', 'none');
                $('#item2').css('display', 'none');
                $('#page').css('display', 'none');
                $('#nodata').css('display', 'block');
            })
            $('#nav3').on('click', function () {
                $('#nav3').addClass('layui-this');
                $('#nav1').removeClass('layui-this');
                $('#nav2').removeClass('layui-this');
                $('#nav4').removeClass('layui-this');
                $('#nav5').removeClass('layui-this');
                $('#item1').css('display', 'none');
                $('#item2').css('display', 'none');
                $('#page').css('display', 'none');
                $('#nodata').css('display', 'block');
            })
            $('#nav4').on('click', function () {
                $('#nav4').addClass('layui-this');
                $('#nav2').removeClass('layui-this');
                $('#nav3').removeClass('layui-this');
                $('#nav1').removeClass('layui-this');
                $('#nav5').removeClass('layui-this');
                $('#item1').css('display', 'block');
                $('#item2').css('display', 'block');
                $('#page').css('display', 'block');
                $('#nodata').css('display', 'none');
            })
            $('#nav5').on('click', function () {
                $('#nav5').addClass('layui-this');
                $('#nav1').removeClass('layui-this');
                $('#nav2').removeClass('layui-this');
                $('#nav4').removeClass('layui-this');
                $('#nav3').removeClass('layui-this');
                $('#item1').css('display', 'none');
                $('#item2').css('display', 'none');
                $('#page').css('display', 'none');
                $('#nodata').css('display', 'block');
            })
            form.on('submit(data-search-btn)', function (data) {
                var result = JSON.stringify(data.field);
                layer.alert(result, {
                    title: '最终的搜索信息'
                });
                var oid = '',
                    mname = '';
                oid = $('#oid').val();
                mname = $('#mname').val();
                if ($('#all').hasClass('checked'))
                    alert('haa');
                if (oid != '') {
                    if (oid == '2022020401') {
                        $('#item1').css('display', 'block');
                        $('#item2').css('display', 'none');
                        $('#nodata').css('display', 'none');
                        laypage.render({
                            elem: 'page',
                            count: 1,
                            layout: ['prev', 'page', 'next', 'count', 'skip']
                        });
                        if (mname != '') {
                            if (mname != '热轧钢板') {
                                $('#item1').css('display', 'none');
                                $('#nodata').css('display', 'block');
                                $('#page').css('display', 'none');
                            }
                        }
                    } else if (oid == '2022020402') {
                        $('#item2').css('display', 'block');
                        $('#item1').css('display', 'none');
                        $('#nodata').css('display', 'none');
                        laypage.render({
                            elem: 'page',
                            count: 1,
                            layout: ['prev', 'page', 'next', 'count', 'skip']
                        });
                        if (mname != '') {
                            if (mname != '防火涂料') {
                                $('#item2').css('display', 'none');
                                $('#nodata').css('display', 'block');
                                $('#page').css('display', 'none');
                            }
                        }
                    } else {
                        $('#item2').css('display', 'none');
                        $('#item1').css('display', 'none');
                        $('#nodata').css('display', 'block');
                        $('#page').css('display', 'none');
                    }
                } else {
                    if (mname != '') {
                        if (mname == '热轧钢板') {
                            $('#item1').css('display', 'block');
                            $('#item2').css('display', 'none');
                            $('#nodata').css('display', 'none');
                            laypage.render({
                                elem: 'page',
                                count: 1,
                                layout: ['prev', 'page', 'next', 'count', 'skip']
                            });
                        } else if (mname == '防火涂料') {
                            $('#item2').css('display', 'block');
                            $('#item1').css('display', 'none');
                            $('#nodata').css('display', 'none');
                            laypage.render({
                                elem: 'page',
                                count: 1,
                                layout: ['prev', 'page', 'next', 'count', 'skip']
                            });
                        } else {
                            $('#item2').css('display', 'none');
                            $('#item1').css('display', 'none');
                            $('#nodata').css('display', 'block');
                            $('#page').css('display', 'none');
                        }
                    }
                }
                return false;
            });

        });
    </script>

</body>

</html>